import React from "react";
import {
  withRouter
} from "react-router-dom";
import {
  Button,
  message

} from 'antd';
import {
  Link

} from "react-router-dom";
import bossCss from './boss.module.css'

class Detail extends React.Component {
  state = {
    writeOff: false,
    data: null,
    hasWriteOff: false
  }
  componentDidMount () {
    this.getApplyDetail()

  }

  //申请详情
  getApplyDetail = () => {

    const applyId = this.props.location.state.applyId
    this.$axios({
      method: 'post',
      url: `/wx/portal/applyDetail?applyId=${applyId}`,
    }).then(res => {
      console.log(res, '数据')
      this.setState({ data: res.data.data })

    }).catch(function (error) {
      console.log(error);
    })

  }
  //核销
  submitApply = () => {
    const voucherId = this.props.location.state.voucherId
    const userId = this.props.location.state.userId
    const voucherNumber = this.state.data.voucherDtos.filter(i => i.voucherId === parseInt(voucherId))[0].voucherNumber
    this.$axios({
      method: 'post',
      url: '/wx/portal/writeOff',
      data: {
        userId: userId,
        voucherId: voucherId,
        voucherNumber: voucherNumber
      }
    }).then(res => {
      console.log(res, '数据')
      if (res.data.msg === "操作成功") {
        this.setState({ writeOff: true })

      } else if (res.data.msg === "该电子券已核销") {
        this.setState({ hasWriteOff: true })
        message.error({
          content:res.data.msg,
          style:{marginTop:250,left:100}
        });
      }
    }).catch(function (error) {
      console.log(error);
    })

  }

  render () {
    const { data, writeOff, hasWriteOff } = this.state
    const voucherId = this.props.location.state.voucherId
    const userId = this.props.location.state.userId

    return (
      <div>
        {!writeOff ?
          <div className={bossCss.login}>
            <div>
              <div style={{ fontWeight: 'bold', textAlign: "center" }} >申请详情</div>
              {data !== null ? <div>
                {
                  hasWriteOff || data.voucherDtos.filter(i => i.voucherId === parseInt(voucherId))[0].offStatus === "1" ?
                    <div style={{ color: "red" }}>此电子券已被核销过，不可重复核销</div> : ''
                }
                <div className={bossCss.spacebetween}>核销状态:<div>{data.voucherDtos.filter(i => i.voucherId === parseInt(voucherId))[0].offStatus === "1" ? "已核销" : "未核销"}</div></div>
                <div className={bossCss.spacebetween}  >申请编号:<div>{data.applyId}</div></div>
                <div className={bossCss.spacebetween}>申请人:<div>{data.userName}</div></div>
                <div className={bossCss.spacebetween}>申请人编号:<div>{data.userId}</div></div>
                <div className={bossCss.spacebetween}>场地数量:<div>{data.siteNum}</div></div>
                <div className={bossCss.spacebetween}>时长:<div>{data.duration}小时</div></div>
                <div className={bossCss.spacebetween}>打球日期:<div>{data.playDate.slice(0, 11)}</div></div>
                <div className={bossCss.spacebetween}>电子券ID:<div>{voucherId}</div></div>
                <div className={bossCss.spacebetween}>电子券编号:<div>{data.voucherDtos.filter(i => i.voucherId === parseInt(voucherId))[0].voucherNumber}</div></div>

              </div>
                : ""
              }
            </div>
            <div style={{ textAlign: "center", marginTop: 20, display: "flex", justifyContent: "space-around" }}>
              <Button type="primary" htmlType="submit" onClick={this.submitApply}>
                确认核销
              </Button>
              <Link to={{ pathname: "/bossHistory", state: { userId } }}>
                <Button type="primary"  >
                  核销历史
                </Button>
              </Link>
            </div>
          </div> :
          <div className={bossCss.success}>
            <svg t="1625562479130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1668" width="100" height="100"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#52C41A" p-id="1669"></path><path d="M178.614857 557.860571a42.496 42.496 0 0 1 60.123429-60.050285l85.942857 87.625143a42.496 42.496 0 0 1-60.050286 60.123428L178.614857 557.860571z m561.005714-250.148571a42.496 42.496 0 1 1 65.097143 54.637714L394.459429 725.577143a42.496 42.496 0 0 1-65.097143-54.637714l410.112-363.373715z" fill="#FFFFFF" p-id="1670"></path></svg>
            <div style={{ fontSize: 20, marginTop: 30 }}>核销成功</div>
            <Link to={{ pathname: "/bossHistory", state: { userId } }}>
              <Button type="primary" style={{ marginTop: 20 }} >
                查看核销历史
              </Button>
            </Link>
          </div>
        }
      </div>

    );
  }
}



export default withRouter(Detail)

